<template>
  <form @submit="formSubmit">
    <div class='depotEnterDetail'>
      <scroll-view scroll-y>
        <detailList type='回款平台确认'></detailList>
        <div class="detailList">
          <div class="weui-cells__title header">确认信息</div>
          <div class="weui-cells weui-cells_after-title">

            <div class="weui-cell">
              <div class="weui-cell__bd">审核备注</div>
              <div class="weui-cell__ft">车架号明文字说明文字说明文字说明文字说明文字说明文字说明文字说明文字说明文字说明文字，文字说明文字说明文字说明文字说明文字说明文字说明文字说</div>
            </div>
             <div class="weui-cell">
              <div class="weui-cell__bd must">回款本金（元）</div>
              <div class="weui-cell__ft">
                <input maxlength="10" :disabled="editCode" name="benjin" :value="data.benjin" placeholder="填写回款本金" />
              </div>
            </div>
             <div class="weui-cell">
              <div class="weui-cell__bd must">利息（元）</div>
              <div class="weui-cell__ft">
                <input maxlength="10" :disabled="editCode" name="lixi" :value="data.lixi" placeholder="填写利息" />
              </div>
            </div>
             <div class="weui-cell">
              <div class="weui-cell__bd must">逾期费（元）</div>
              <div class="weui-cell__ft">
                <input maxlength="10"  :disabled="editCode" name="yuqi" :value="data.yuqi" placeholder="填写逾期费" />
              </div>
            </div>

            <div class="weui-cell">
              <div class="weui-cell__bd">还款状态</div>
              <div class="weui-cell__ft">

                <radio-group @change="radioChange"  :disabled="editCode" :data-index="1" name="huanKuanZhuangTai">
                  <label class="weui-check__label" v-for="(item,index) in data.radio1" :key="index">
                    <radio class="weui-check" :value="item.value"  />
                    <div class="weui-cell__hd weui-check__hd_in-checkbox">
                      <icon class="weui-icon-checkbox_circle" type="circle" size="23" v-if="!item.checked"></icon>
                      <icon class="weui-icon-checkbox_success" type="success" size="23" v-if="item.checked"></icon>
                    </div>
                    <div class="weui-cell__bd">{{item.name}}</div>
                  </label>
                </radio-group>


              </div>
            </div>

                <div class="weui-cell">
              <div class="weui-cell__bd">差异调整金额</div>
              <div class="weui-cell__ft">
                <input maxlength="10" :disabled="editCode" name="chaYiTiaoZhengJinE" :value="data.chaYiTiaoZhengJinE"  placeholder="填写金额" />
              </div>
            </div>
                <div class="weui-cell">
              <div class="weui-cell__bd">差异调整原因</div>
              <div class="weui-cell__ft">
                <input maxlength="10" :disabled="editCode" name="chaYiTiaoZhengYuanYin" :value="data.chaYiTiaoZhengYuanYin" placeholder="填写原因" />
              </div>
            </div>
                <div class="weui-cell">
              <div class="weui-cell__bd">还款银行卡号</div>
              <div class="weui-cell__ft">
                <input maxlength="18" :disabled="editCode" name="huanKuanKaHao" :value="data.huanKuanKaHao" placeholder="填写银行卡号" />
              </div>
            </div>
           
               <div class="weui-cell">
              <div class="weui-cell__bd must">还款日期</div>
              <div class="weui-cell__ft searchValue">
                     <div>{{data.date}}</div>
                   <picker class="weui-btn" :disabled="editCode" mode="date" name="date" :value="data.date" start="1999-01-01" end="2099-01-01" @change="DateChange">
                     <view class="weui-select weui-select_in-select-after noneBorder"></view>
                  </picker>
              </div>
            </div>
              <div class="weui-cell">
              <div class="weui-cell__bd">银行流水编号</div>
              <div class="weui-cell__ft">
                <input maxlength="20" name="yinHangLiuShui" :disabled="editCode" :value="data.yinHangLiuShui" placeholder="填写银行流水编号" />
              </div>
            </div>

                <div class="weui-cell">
              <div class="weui-cell__bd must">确认信息</div>
              <div class="weui-cell__ft">

                <radio-group @change="radioChange" :disabled="editCode" :data-index="2" name="xinxi">
                  <label class="weui-check__label" v-for="(item,index) in data.radio2" :key="index">
                   <radio class="weui-check" :value="item.value"  />
                    <div class="weui-cell__hd weui-check__hd_in-checkbox">
                      <icon class="weui-icon-checkbox_circle" type="circle" size="23" v-if="!item.checked"></icon>
                      <icon class="weui-icon-checkbox_success" type="success" size="23" v-if="item.checked"></icon>
                    </div>
                    <div class="weui-cell__bd">{{item.name}}</div>
                  </label>
                </radio-group>


              </div>
            </div>

             <div class="weui-cell">
              <div class="weui-cell__bd">确认备注</div>
              <div class="weui-cell__ft">
                <input maxlength="50" name="beizhu" :disabled="editCode" :value="data.beizhu" placeholder="手动输入，最多输入50字" />
              </div>
            </div>

          </div>
        </div>
        <view class="btn-area submit">
          <button formType="submit">提交</button>
        </view>
      </scroll-view>
    </div>
  </form>
</template>

<script>
  import detailList from '@/components/common/detailList'
  import Qinniu from '@/components/common/Qinniu'

  export default {
    data() {
      return {
         data: {
          xinxi: "", // 确认
          radio1:"" ,//确认信息1
          radio2:"" ,//确认信息2
          benjin:"",  //本金
          lixi:"",    //利息
          yuqi:"",    //逾期费
          date:"",    //还款日期
          huanKuanZhuangTai:"", //还款状态
          chaYiTiaoZhengJinE:"",  //差异调整金额
          chaYiTiaoZhengYuanYin:"",//差异调整原因
          huanKuanKaHao:"",   //还款卡号
          yinHangLiuShui:"",  //银行流水
          beizhu: "", //确认备注
        },
         editCode: true, //编辑，还会查看，亦或者是添加
      }
    },
    methods: {
      formSubmit: function (e) {
        const params = e.mp.detail.value
        // 传入表单数据，调用验证方法
        if (!this.WxValidate.checkForm(params)) {
          const error = this.WxValidate.errorList[0]
          this.WxValidate.showModal(error)
          return false
        }

        this.$https.post("http://rap2api.taobao.org/app/mock/22254/lyl/xiaochegnxu/Warehousing_button_post", {params,}).then(res => {
            this.WxValidate.showModal({
              msg: '提交成功',
            })
        })
      },
      radioChange(e) {    //根据参数确定那个数组
            let index = e.currentTarget.dataset.index
            // console.log('radio 携带的值为：' + e.mp.detail.value);
            let value =  e.mp.detail.value ;

            let radio = this.data["radio"+index];

            for (let i = 0; i < radio.length; ++i) {
              radio[i].checked = radio[i].value === value;
            }
            this.data.radio[index] = radio;

            if(index==2){
                this.data.huanKuanZhuangTai = value;
            }
      },
       DateChange(e) {  //选择时间
         this.data.date = e.mp.detail.value
      },
      is_disabled() {
        let code = this.$mp.query.idCode
        switch (true) {
          case code == 1: //编辑
            this.editCode = false;
            break;
          case code == 2: //查看
            this.editCode = true;
            break;
          default:
            this.editCode = false;
            break; //添加
        }
      },
      initValidate() {
        // 验证字段的规则
        const rules = {
          xinxi: {
            required: true
          },
          benjin: {
            required: true
          },
          lixi: {
            required: true
          },
          yuqi: {
            required: true
          },
          date: {
            required: true
          },

        }

        const message = {
          xinxi: {
            required: " 请填写确认信息"
          },
          benjin: {
            required: " 请填写本金"
          },
          lixi: {
            required: " 请填写利息"
          },
          yuqi: {
            required: " 请填写逾期费用"
          },
          date: {
            required: " 请填写还款日期"
          },
        }
        //创建实例对象
        this.WxValidate = new this.wxValidate(rules, message);
      },
    },
     mounted() {
      this.initValidate();
      this.is_disabled();
      this.$https.get("http://rap2api.taobao.org/app/mock/22254/lyl/xiaochengxu/WarehousingDetail", {
        id: this.$mp.query.id
      }).then(res => {
          this.data = Object.assign({},this.data,res.data.data);
          
      })
    },
    components: {
      detailList,
      Qinniu
    }
  }
</script>


<style lang="scss" scoped>
  .depotEnterDetail {
    height: 100%;
    box-sizing: border-box;

    scroll-view {
      height: 100%;

    }

  }
</style>
